<!--
 * @Descripttion: 退房
 * @version: 1.0
 * @Author: 狸猫
 * @Date: 2023-11-25 14:29:36
 * @LastEditors: 狸猫
 * @LastEditTime: 2023-11-25 16:05:55
-->
<template>
  <div class="content">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="1200px"
      append-to-body
      :before-close="close"
    >
      <el-descriptions title="合同信息">
        <el-descriptions-item label="房间地址"
          >1201房/红枫小区A栋1单元</el-descriptions-item
        >
        <el-descriptions-item label="合同周期"
          >2023-09-12~2024-09-11</el-descriptions-item
        >
        <el-descriptions-item label="承租人"
          >赵先生-13233445566</el-descriptions-item
        >
        <el-descriptions-item label="租金">1200元/月</el-descriptions-item>
        <el-descriptions-item label="押金">1600元/月</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="退租费用结算"></el-descriptions>
      <el-form :model="form" :inline="true">
        <el-form-item label="实际离房日期（财务终止日期）">
          <el-date-picker
            v-model="form.time"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="退租类型">
          <el-radio-group v-model="form.resource">
            <el-radio label="正常退租"></el-radio>
            <el-radio label="违约退租"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否加收房间清洁费">
          <el-radio-group v-model="form.isCleaningFee">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="清洁费" v-if="form.isCleaningFee == 1">
          <el-input v-model="form.cleaningFee"></el-input>
        </el-form-item>
        <el-descriptions title="退租租客收款人信息"></el-descriptions>
        <el-form-item label="收款人姓名">
          <el-input v-model="form.cleaningFee"></el-input>
        </el-form-item>
        <el-form-item label="收款人电话">
          <el-input v-model="form.cleaningFee"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.cleaningFee"></el-input>
        </el-form-item>
        <el-form-item label="收款方式">
          <el-input v-model="form.cleaningFee"></el-input>
        </el-form-item>
        <el-form-item label="收款账号">
          <el-input v-model="form.cleaningFee"></el-input>
        </el-form-item>
        <el-form-item label="退租备注">
          <el-input v-model="form.cleaningFee"></el-input>
        </el-form-item>
      </el-form>
      <el-descriptions title="费用明细"></el-descriptions>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="欠费" name="first"></el-tab-pane>
        <el-tab-pane label="退还" name="second"></el-tab-pane>
        <el-tab-pane label="扣减" name="third"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="费用类型"> </el-table-column>
        <el-table-column prop="name" label="金额"> </el-table-column>
        <el-table-column prop="address" label="费用周期"> </el-table-column>
        <el-table-column prop="" label="操作">
          <i class="el-icon-delete"></i>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "checkOut",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    roomId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeName: "first",
      title: "退房",
      form: {
        isCleaningFee: "1",
      },
      tableData: [
        {
          date: "租金/房屋租金",
          name: "￥1230.20",
          address: "2023-10-10-2024-10-1",
        },
        {
          date: "租金/房屋租金",
          name: "￥1230.20",
          address: "2023-10-10-2024-10-1",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    close() {
      this.$emit("closeeldialog");
    },
  },
};
</script>
<style lang="sasss" scoped></style>
